<template>
  <div class="rule-list innerPageTable-out-flex">
    <search-form
      :form-data="formData"
      @search="searchHandle"
      @reset="resetHandle"
    ></search-form>
    <InnerPageTable ref="listTable" :config="pageTableConfig" >
          <div slot="table-bar">
              <Button
                @click.native="exportHandle"
              >导出</Button>
              <Button v-show="false"></Button>
          </div>
    </InnerPageTable>
  </div>
</template>
<script>
import SearchForm from "@/components/common/SearchForm"
import ruleDetails from "./pages/RuleDetails";

import { generateLists,configForm } from "./columns_list.js";
import ruleListAPI from "@/api/ruleListApi.js";
import { mixin } from './mix/mixin'

export default {
  name: 'rule-list',
  mixins: [mixin],
  components: {
    searchForm: SearchForm
  },
  computed: {
    searchData() {
      return configForm.bind(this)()
    }
  },
  data () {
    return {
      pageTableConfig: {
        loadDataFn: this.getTableList,
        columns: generateLists.bind(this)(),
        autoFirst: true,
        selectionAreaItem: { key: "id", title: "userName" },
        allSelection: [],
        initParam: {
          "bpmnStateList": [],
          "code": "",
          "codeList": [],
          "dataItemName": "",
          "dataSubject": "",
          "describes": "",
          "functionModules": "",
          "idList": [],
          "profitCenterList": [],
          "stateList": [],
          "title": "",
          "descs": ["create_time"]
        }
      },
    }
  },
  activated() {
    if (this.$route.query.id) {
      this.detailHandle({ id: this.$route.query.id, code: '' })
    }
  },
  methods: {
    getTableList(tableObj) {
      let { responseProcess, initParam, param } = tableObj;
      const params = {
        ...param,
        ...initParam
      }
      ruleListAPI.querylist(params).then(res => {
        responseProcess(res.data);
      })
    },
    // 导出事件按钮
    exportHandle() {
      let allSelected = this.$refs["listTable"].allSelection;
      let params = {
        "codeList": [],
        "dataItemName": "",
        "dataSubject": "",
        "describes": "",
        "functionModules": "",
        "idList": [],
        "stateList": [],
        "title": ""
      }
      const idList = allSelected.map(user => user.id);
      params.idList=idList
      ruleListAPI.exportData(params).then(response => {
        let excelName = decodeURI(response.headers['content-disposition'].split(";")[1].split("=")[1]);//截取响应头的文件后缀
        console.log(excelName ,'截取的文件名');
        const link = document.createElement("a");//创建a标签
        let blob = new Blob([response.data], {
          type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf - 8"
        });//设置文件类型
        link.style.display = "none";
        link.href = URL.createObjectURL(blob);//将文件流转化为blob地址
        link.setAttribute("download", excelName);//文件名，而不是写死.excel之类
        // link.download = excelName
        document.body.appendChild(link);//创建
        link.click();//点击事件
        document.body.removeChild(link);//移除

      }).catch(err => {})

    },

    //详情事件按钮
    detailHandle(row) {
      let isDisabled1 = true
      let rowDetail =row
      let detailId = row.id
      let groupCode=row.code
      new this.$sidelipPage(ruleDetails, { props: {rowDetail,detailId,groupCode,isDisabled1, title: '列表详情(只读)', route: 'rule-list' },isNav: false  });
    },
  }

}
</script>


<style>

</style>
